<caltech-header title="Work order" page="pageCount">
    <h3>WORK ORDER</h3>
    <h5 ng-show="model.workOrderNo">WO #: {{model.workOrderNo}}</h5>
</caltech-header>

<div class="page-quote-item page-workorder-item">
    <div class="pull-right-print">
        <div class="row">
            <div class="col-xs-2">
                <label>Customer:</label>
            </div>
            <div class="col-xs-5">
                <strong class="form-control-static">{{model.company.name}}</strong>
            </div>
            <div class="col-xs-2">
                <label>PO #:</label>
            </div>
            <div class="col-xs-3">
                <span e-typeahead="item as item.poNumber for item in getPOList($viewValue)" e-typeahead-editable="false"
                      onaftersave="updateEquipment($data)" editable-text="model.poNumber" buttons="no" blur="submit"><strong>{{model.poNumber}}</strong></span>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2">
                <label>Address:</label>
            </div>
            <div class="col-xs-5">

                <span class="form-control-static">
                    {{model.company.address}}
                    <span ng-if="model.company.city">, {{model.company.city}}</span>
                    <span ng-if="model.company.state">, {{model.company.state}}</span>
                    <span ng-if="model.company.country">, {{model.company.country}}</span>
                </span>
            </div>
            <div class="col-xs-2">
                <label>Sales man:</label>
            </div>
            <div class="col-xs-3">
                <span class="form-control-static">{{model.salesman.fullName}}</span>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2">
                <label>Contact:</label>
            </div>
            <div class="col-xs-5">
                <span class="form-control-static">{{model.company.contactPersonName}}</span>
            </div>
            <div class="col-xs-2">
                <label>Phone:</label>
            </div>
            <div class="col-xs-3">
                <span class="form-control-static">{{model.salesman.tel}}</span>
            </div>

        </div>
        <div class="row">
            <div class="col-xs-2">
                <label>Phone:</label>
            </div>
            <div class="col-xs-5">
                <span class="form-control-static">{{model.company.tel}}</span>
            </div>
            <div class="col-xs-2">
                <label>Calibration date:</label>
            </div>
            <div class="col-xs-3">
                <a href="#" e-datepicker-popup="dd/MMM/yyyy" editable-bsdate="model.calibrationDate" buttons="no" blur="submit" e-name="calibrationDate">{{model.calibrationDate | date: 'dd/MMM/yyyy'}}</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2">
                <label>Mobile:</label>
            </div>
            <div class="col-xs-5">
                <!--<span editable-tel="model.company.mobile" e-pattern="\d{2}\-\d{3}\-\d{6}" buttons="no" blur="submit">{{model.company.mobile}}</span>-->
                <span class="form-control-static">{{model.company.mobile}}</span>
            </div>

            <div class="col-xs-2" style="display:none">
                <label>Calibration Cycle:</label>
            </div>
            <div class="col-xs-3" style="display:none">
                <a href="#" editable-select="model.calibrationCycle" buttons="no" blur="submit"
                   e-ng-options="cycle.value as cycle.text for cycle in Cycles">{{model.calibrationCycle}} months</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2">
                <label>Email:</label>
            </div>
            <div class="col-xs-5">
                <a href="mailto:{{model.company.email}}" class="form-control-static">{{model.company.email}}</a>
            </div>
            <div class="col-xs-2" style="display:none">
                <label>Next Due Date:</label>
            </div>
            <div class="col-xs-3" style="display:none">
                <p class="form-control-static">{{model.nextDueDate | date: 'dd/MMM/yyyy'}}</p>
            </div>
        </div>
        <!--        <div class="row hidden-print">
                    <div class="col-xs-2">
                        <label>Technician:</label>
                    </div>
                    <div class="col-xs-5">
                        <div user-dropdown="Technician" bind="model.technician"></div>
                    </div>
                    <div class="col-xs-2">
                        <label>Procedure:</label>
                    </div>
                    <div class="col-xs-3">
                        <a href="#" editable-text="model.procedure" buttons="no" blur="submit">{{model.procedure}}</a>
                    </div>
                </div>-->
    </div>
</div>
<table class="table">
    <thead>
        <tr>
            <th class="col-xs-1 hidden-print">#</th>
            <th class="visible-print" style="width: 1%;">#</th>
            <th class="col-xs-3">Description</th>
            <th class="col-xs-2">Manufacturer</th>
            <th class="col-xs-2">Model</th>
            <th class="col-xs-2">Range</th>
            <th class="col-xs-2">Service at</th>
            <th class="col-xs-1 text-center quantity">Qty</th>
            <th class="col-xs-2 visible-print">Technician</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in model.workOrderDetails">
            <td class="visible-print">
                <span class="form-control-static">{{$index + 1}}</span>
            </td>
            <td class="hidden-print">
                <span class="form-control-static" style="white-space: nowrap;">
                    {{item.poNumber}}
                </span>
            </td>
            <td>
                <span class="form-control-static" style="overflow:hidden; text-overflow: ellipsis;" title="{{item.name}}">
                    {{item.name}}
                </span>
            </td>
            <td>
                <span class="form-control-static" style="white-space: nowrap;">
                    {{item.manufacturer}}
                </span>
            </td>
            <td>
                <span class="form-control-static" style="white-space: nowrap;">
                    {{item.modelNumber}}
                </span>
            </td>
            <td>
                <span class="form-control-static" style="white-space: nowrap;">
                    {{item.description}}
                </span>
            </td>
            <td>
                <span editable-select="item.servicePlace" e-name="servicePlace" e-form="rowform" e-ng-options="s.value as s.text for s in servicePlaces" e-required class="form-control-static">
                    {{showServicePlaces(item.servicePlace)}}
                </span>
            </td>
            <td>
                <span editable-number="item.quantity" e-name="quantity" e-form="rowform" e-min="1" e-required class="text-center form-control-static" e-class="text-center">
                    {{item.quantity | number}}
                </span>
            </td>
            <td class="hidden-print text-right" style="white-space:nowrap;">
                <form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline">
                    <button type="submit" ng-disabled="rowform.$waiting || rowform.$invalid" class="btn btn-primary btn-sm"><b class="glyphicon glyphicon-ok"></b></button>
                    <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default btn-sm"><b class="glyphicon glyphicon-remove"></b></button>
                </form>
                <button ng-show="!rowform.$visible" class="btn btn-primary btn-sm" ng-click="rowform.$show()"><b class="glyphicon glyphicon-edit"></b></button>
                <button ng-show="!rowform.$visible" class="btn btn-danger btn-sm" ng-click="removeRow($index)"><b class="glyphicon glyphicon-trash"></b></button>
                <button class="btn btn-primary btn-sm" ng-click="goToCertificate(item.equipmentId,model.companyId)" tooltip="Add Certificate"><b class="glyphicon glyphicon-share-alt"></b></button>
            </td>
            <!--<td class="hidden-print text-right">

            </td>-->
            <td class="visible-print"></td>
        </tr>

        <tr>
            <td class="text-left" colspan="2"><strong class="form-control-static">Sales Manager:</strong></td>
            <td class="text-left" colspan="2">                

                <strong class="form-control-static grand-total" ng-if="model.showFullName && !model.managerId">{{user.fullName}}</strong>
                <strong class="form-control-static grand-total" ng-if="model.showFullName && model.managerId">{{model.manager.fullName}}</strong>
            </td>
            <td class="text-left">
                <input type="checkbox" ng-click="model.showFullName=!model.showFullName;" ng-model="model.showFullName" class="hidden-print" has-role="Admin,Management(BGD),SalesManager">
            </td>

            <td class=""><strong class="form-control-static">Total units</strong></td>
            <td class="text-center">
                <span class="form-control-static">{{totalAmount | number}}</span>
            </td>
            <td class="hidden-print"></td>
        </tr>
    </tbody>
</table>
<div class="hidden-print">
    <div class="row">
        <div class="col-xs-3">
            <label>Notes:</label>
        </div>
        <div class="col-xs-8">
            <span editable-text="model.note" buttons="no" blur="submit">{{model.note}}</span>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3">
            <label>Status:</label>
        </div>
        <div class="col-xs-3">
            <a href="#" e-ng-options="s.value as s.text for s in status" editable-select="model.status" buttons="no" blur="submit" e-name="status">
                {{showStatus(model.status)}}
            </a>
        </div>
    </div>
</div>
<!--<page-footer page="1" standard="WO-230.3 – Form Date: Jan/2014"></page-footer>-->

<div class="page-footer visible-print " style="width:100%!important; display:table;">
    <div class="row spacing-bottom-sm" style="width:95%;">
        <div class="col-xs-2">
            <label>Kim Long QC:</label>
        </div>
        <div class="col-xs-4">
            <div style="border-bottom: 1px dotted #999; width: 95%;">&nbsp;</div>
        </div>
        <div class="col-xs-2">
            <label>Customer:</label>
        </div>
        <div class="col-xs-4">
            <div style="border-bottom: 1px dotted #999; width: 95%;">&nbsp;</div>
        </div>
    </div>
</div>

<nav class="navbar navbar-default navbar-fixed-bottom navbar-inverse" role="navigation">
    <div class="container">
        <button class="btn btn-info navbar-btn" ng-click="back()">Back</button>
        <button class="btn btn-warning navbar-btn pull-right" has-access="WODelete" busy-click="remove(model)" success="Deleted successfully" ng-show="model.workOrderId != undefined">Delete</button>
        <button class="btn btn-info navbar-btn" has-access="WOEdit" ng-show="model.workOrderId != undefined" busy-click="update(model)" success="Updated successfully">Update</button>
        <button class="btn btn-info navbar-btn" has-access="WOCreate" ng-hide="model.workOrderId != undefined" busy-click="save(model)" success="Created successfully">Save</button>
        <button class="btn btn-info navbar-btn" ng-show="model.workOrderId != undefined" ng-click="doPrint()"><i class="glyphicon glyphicon-print"></i>&nbsp;Print</button>
    </div>
</nav>
